<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>vue</title>
    <script src='https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js'></script>
</head>

<body>
    <div id='app'>
        <star>
            <li slot="lee">李宗盛--</li>
            <li slot="eason">陈奕迅--</li>
            <li>剑圣--</li>
        </star>
        <h1>等效写法</h1>
        <star>
            <template v-slot:lee>
                <li>李宗盛--</li>
            </template>
            <template #eason>
                <li>陈奕迅--</li>
            </template>

            <li>剑圣--</li>
        </star>
    </div>
</body>
<script>
    // vue 2.5 之后的写法
    Vue.component('star', {
        template: `
            <ul>
                <li>项羽</li>
                <slot name="lee"></slot>
                <li>张飞</li>
                <slot name="eason"></slot>
                <li>吕布</li>
                <slot></slot>
            </ul>    
        `
    });


    let vm = new Vue({
        el: '#app'
    });
</script>

</html>